<template>
	<view style="padding-bottom: 40rpx;">
		<div class="search-box">
			<view class="search-title">我的网格(4)</view>
			<view class="search-content">

				<u--input placeholder="搜索地图" v-model="queryParams.title" @confirm="getData">
					<u-icon name="search" slot="suffix" color="#2979ff" size="28" @click="getData"></u-icon>
				</u--input>
			</view>
		</div>
		<view class="map-box">
			<view class="my-grid" @click="myNetwork()">
				<!-- <text class="tip">标注数量：XX</text> -->
				<view class="img">
					<image style="width:100%;" src="/static/gridManagement/my_map.png"></image>
				</view>
				<view class="sub_title_box">
					<view class="sub_title">我的网格</view>
					<view class="update_time">更新时间：2025-06-05 11:09</view>
				</view>

			</view>

			<view class="other_map_box">
				<view class="map_item" v-for="item in dataList" @click="jump(item)">
					<!-- <text class="tip">标注数量：{{item.cnt}}</text> -->
					<view class="img">
						<image style="width:100%;" :src="item.imgUrl || errorImage">
						</image>

					</view>
					<view class="sub_title_box">
						<view class="sub_title">{{item.title}}</view>
						<view class="update_time">更新时间：{{item.updateTime}}</view>
					</view>
				</view>
				<!-- <view class="map_item">
					<text class="tip">标注数量：XX</text>
					<view class="img">
						<image style="width:100%;" src="/static/gridManagement/my_map.png"></image>
					</view>
					<view class="sub_title_box">
						<view class="sub_title">贷款客户</view>
						<view class="update_time">更新时间：2025-06-05 11:09</view>
					</view>
				</view>
				<view class="map_item">
					<text class="tip">标注数量：XX</text>
					<view class="img">
						<image style="width:100%;;" src="/static/gridManagement/my_map.png"></image>
					</view>
					<view class="sub_title_box">
						<view class="sub_title">不良客户</view>
						<view class="update_time">更新时间：2025-06-05 11:09</view>
					</view>
				</view>
				<view class="map_item">
					<text class="tip">标注数量：XX</text>
					<view class="img">
						<image style="width:100%;" src="/static/gridManagement/my_map.png"></image>
					</view>
					<view class="sub_title_box">
						<view class="sub_title">开门红</view>
						<view class="update_time">更新时间：2025-06-05 11:09</view>
					</view>
				</view> -->
			</view>
		</view>


	</view>
</template>

<script>
	import {
		HOST_H5,
		filePreviewUrl
	} from '@/config/env.js'
	import {
		list
	} from '@/common/api/JzzxMapManage.js'
	export default {
		data() {
			return {
				queryParams: {
					title: ""
				},
				errorImage: '/static/gridManagement/my_map.png',
				dataList: [
					// {
					// 	title: "存款客户",
					// 	updateTime: '2025-06-05 11:09',
					// 	imgUrl: '',
					// 	pageUrl: '/pages/gridManagement/depositCustomers/depositCustomers',
					// 	cnt: 10
					// },
					// {
					// 	title: "贷款客户",
					// 	updateTime: '2025-06-05 11:09',
					// 	imgUrl: '/pages/gridManagement/depositCustomers/depositCustomers',
					// 	pageUrl: '/pages/gridManagement/loanCustomer/loanCustomer',
					// 	cnt: 18
					// },

					// {
					// 	title: "不良客户",
					// 	updateTime: '2025-06-05 11:09',
					// 	imgUrl: '',
					// 	pageUrl: '/pages/gridManagement/badCustomers/badCustomers',
					// 	cnt: 14
					// },

					// {
					// 	title: "开门红",
					// 	updateTime: '2025-06-05 11:09',
					// 	imgUrl: '',
					// 	pageUrl: '/pages/gridManagement/goodStart/goodStart',
					// 	cnt: 14
					// }
				]
			}
		},
		mounted() {
			this.getData()
		},
		computed: {


		},
		methods: {

			jump(item) {
				if (item.system == '1') {
					uni.navigateTo({
						url: '/pages/gridManagement/loanCustomer/loanCustomer?type=' + item.type
					});
				} else {
					uni.navigateTo({
						url: '/pages/gridManagement/badCustomers/badCustomers'
					});
				}

			},
			allType() {
				return this.dataList.filter((item) =>
					item.system == '1' && item.type != 'goodStart'
				).map((item) => item.type).join(",")
			},
			hasGoodStart() {
				return this.dataList.find((item) => item.system == '1' && item.type == 'goodStart') ? '1' : ''
			},
			myNetwork() {

				uni.navigateTo({
					url: '/pages/gridManagement/MyNetwork/MyNetwork?type=' + this.allType() + "&hasGoodStart=" +
						this.hasGoodStart()
				});
			},
			getData() {
				list({
					...this.queryParams,
					visible: '0'

				}).then((res) => {
					this.dataList = res.rows

					this.dataList.forEach((item) => {
						item.imgUrl = filePreviewUrl + item.imgUrl
					})

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-box {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		// font-weight: 700;

		.search-content {
			margin-left: 30rpx;
		}
	}

	.map-box {
		padding: 20rpx 50rpx;

		.tip {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			z-index: 999;
			font-size: 23rpx;
		}



		.sub_title_box {
			text-align: center;
			padding: 10rpx 0 25rpx 0;
			border-top: 1rpx solid rgb(0, 0, 0);

			.update_time {
				font-size: 20rpx;
				margin-top: 5rpx;
			}
		}
	}

	.my-grid {
		width: 100%;
		position: relative;
		border: 3rpx solid rgb(0, 0, 0);

		image {
			height: 278rpx;
		}


	}

	.other_map_box {


		.map_item {
			position: relative;
			width: 47%;
			border: 1rpx solid rgb(0, 0, 0);

			margin-top: 30rpx;

			&:nth-child(odd) {
				float: left;
			}

			&:nth-child(even) {
				float: right;
			}

			image {
				height: 248rpx;
			}
		}
	}
</style>